<html>
  <head>
    <title>Products</title>
    <script type="text/javascript" src="javascripts/curvycorners.js"></script>
    <link rel=StyleSheet href="styles/main.css" type="text/css">

	<script src="http://platform.twitter.com/anywhere.js?id=tDaGA1BMAjROJR8CSpNkSQ&amp;v=1">
  </script>
  <script type="text/javascript">
     //twttr.anywhere.config({ callbackURL: "http://localhost:8080" });
  
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>
	
  </head>

  <body style="font-family: sans-serif;">
    
	<span id="login" align="right"></span>
    <script type="text/javascript">
	  twttr.anywhere(function (T) {
		  var currentUser,
			screenName,
			profileImage,
			profileImageTag;

		if (T.isConnected()) {
		  currentUser = T.currentUser;
		  screenName = currentUser.data('screen_name');
		  profileImage = currentUser.data('profile_image_url');
		  profileImageTag = "<img src='" + profileImage + "'/>";
		  document. getElementById("login"). innerText = "Logged in as " + screenName;
		  //$('#login').append("Logged in as " + profileImageTag + " " + screenName);
		} else {
			T("#login").connectButton({
			  authComplete: function(user) {
				alert("user logged");
			  },
			  signOut: function() {
				alert("user logged out");
			  }
			});
		};
	  
	  });
    </script>
	
	<% if session[:usuario] == true %>
	
	<h2>Add a Product</h2>

	<div class="myBlueBox">
    <form method=post>
	  Product Name: 
      <input type="text" class="myInput" name="name">
      <input type=submit value="add product" class="button">
    </form>
	</div>


	<table>
	<td align="left" valign="top">
		
    <h2>Product List</h2>
	
	
	<div class="myGreenBox">
	<b>Total Products: <%=h @products.size %></b>

	<% @products.each do |product| %>
	<table>
		<td align="left" valign="middle">
	        <%=h product.name %> </td>
		<td align="center" valign="middle">
			<form method ="post" action="/mylist" >
				<input type="hidden" name="id" value="<%=h product.name%>">
				<input type="submit" value="add my list" class="button">
			</form>
		</td>
		<td align="center" valign="middle">
			<form method ="post" action="/<%=h product.id%>" >
				<input type="hidden" name="_method" value="delete"> <input type="submit" value="delete" class="button">
			</form>
		</td>
	</table> 
	    <% end %>
	</div>
	</td>

	<td align="right" valign="top">
		<h2>My List of Products</h2>

		<div class="myGreenBox">
		<b>Total My Products List: <%=h @product_list.size %></b>

	    <% @product_list.each do |mylist| %>
		<table>
			<%if mylist.checked == true %>
				<form method ="post" action="/mylist/checked/<%=h mylist.id%>" >
			    	<td align="left" valign="middle">
						<strike><%=h mylist.product %><strike>
					</td>
				<td align="left" valign="middle">
					<input type="submit" value="unchecked" class="button">
				</td>	
			</form>
			<%else%>
					<form method ="post" action="/mylist/checked/<%=h mylist.id%>" >
				    	<td align="left" valign="middle">
							<%=h mylist.product %>
						</td>
					<td align="left" valign="middle">
						<input type="submit" value="checked" class="button">
					</td>	
				</form>
			<%end%>
			<td align="left" valign="middle">
				<form method ="post" action="/mylist/delete/<%=h mylist.id%>" >
					<input type="hidden" name="id" value="<%=h mylist.id%>">
					<input type="hidden" name="_method" value="delete"> <input type="submit" value="remove" class="button">
			</td>
				</form>
		</p> 
		</table>
	    <% end %>
		</div>
	</td>
	</table>

    <div style="position: absolute; bottom: 20px; right: 20px;">
    <img src="/images/appengine.png"></div>
	
		<script type="text/JavaScript">
	//addEvent(window, 'load', initCorners);
	function initCorners() {
		var setting = {
			tl: { radius: 6 },
			tr: { radius: 6 },
			bl: { radius: 6 },
			br: { radius: 6 },
			antiAlias: true
		}
		curvyCorners(setting, "#myBlueBox");
		curvyCorners(setting, "#myGreenBox");
		curvyCorners(setting, "#myRedBox");
		curvyCorners(setting, "myInput");
		curvyCorners(setting, "button");
		
	}
    </script>	

	<%else%>
	Nao logado
	<%end%>
	
  </body>
</html>